<!--安全生产许可证 productLicenceSafeRpt-->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
                <Col span="8">
                    <FormItem label="企业名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="填表时间：" prop="content" >
                        <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择查询时间段"
                                    @on-change="onSelectQueryDateRange"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="企业名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader1' @setOrgInfo='setQueryCompanyName' :orgTree="true" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="填表时间：" prop="content" >
                        <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择查询时间段"
                                    @on-change="onSelectQueryDateRange"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="资质证书等级：" prop="licenceInfo">
                        <Input v-model='dataToQuery.licenceInfo' class="query-form-el"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="证书编号：" prop="certificateNum">
                        <Input v-model='dataToQuery.certificateNum' class="query-form-el"></Input>
                    </FormItem>
                </Col>
                <Col span="8"></Col>
                <Col span="8" offset="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                    <download-button :api="exportUrl" :queryForm="dataToQuery" />
                    <!-- <Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button> -->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal  title="安全生产许可证" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=800 :styles="{height:'620px'}"  class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'rpt-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{}:ruleCustom" :label-width="mode === 'view'?160:null" :label-position="mode === 'view'?'right':'top'">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='企业名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                                    <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='所在地：' prop='companyAddress'>
                                    <div v-if="mode === 'view'">{{areaCodeToAreaName(dataToView.companyAddress)}}</div>
                                    <Cascader v-else :data="tempAreaTree" v-model="dataToView.companyAddressArr" change-on-select :transfer="true"
                                              :load-data="areaTreeLoadData" :render-format="labels=>labels.join('·')"  :clearable='false'
                                              @on-change="(value,selectedData)=>{$set(dataToView,'companyAddress',value.join(','))}"></Cascader>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='企业资质证书类别及等级：' prop='licenceInfo'>
                                    <div v-if="mode === 'view'">{{dataToView.licenceInfo}}</div>
                                    <Input v-else  type='text' v-model='dataToView.licenceInfo'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='证书编号：' prop='certificateNum'>
                                    <div v-if="mode === 'view'">{{dataToView.certificateNum}}</div>
                                    <Input v-else  type='text' v-model='dataToView.certificateNum'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='有效期：' prop='certValidDate'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.certValidDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.certValidDate'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='许可证编号：' prop='licenceNum'>
                                    <div v-if="mode === 'view'">{{dataToView.licenceNum}}</div>
                                    <Input v-else  type='text' v-model='dataToView.licenceNum'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='许可范围：' prop='licenceRange'>
                                    <div v-if="mode === 'view'">{{dataToView.licenceRange}}</div>
                                    <Input v-else  type='text' v-model='dataToView.licenceRange'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='许可机关：' prop='authOrgName'>
                                    <div v-if="mode === 'view'">{{dataToView.authOrgName}}</div>
                                    <Input v-else  type='text' v-model='dataToView.authOrgName'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='有效期：' prop='licenceValidDate'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.licenceValidDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" style="width: 100%" v-model='dataToView.licenceValidDate'></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='安全生产责任险情况：' prop='saInsurance'>
                                    <div v-if="mode === 'view'">{{dataToView.saInsurance}}</div>
                                    <Input v-else  type='text' v-model='dataToView.saInsurance'></Input>
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label='填表人：' prop='registrant'>
                                    <div v-if="mode === 'view'">{{dataToView.createUserName}}</div>
                                    <Input v-else type='text' v-model='dataToView.registrant' readonly></Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label='填表时间：' prop='registTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.createDate)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el" v-model='dataToView.registTime' readonly></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="11">
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='备注：' prop='notes'>
                                    <div v-if="mode === 'view'">{{dataToView.notes}}</div>
                                    <Input v-else  type='textarea' v-model='dataToView.notes'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
  import {Api} from '@/api/index.js'
  import {formatDate} from '@/tools/index'
  import _deepclone from 'lodash/cloneDeep'
  import { mapState, mapGetters, mapActions } from 'vuex'
  var cascaderDom = () => import('@/components/cascader-dom.vue');
  import pageCommonFunction from '@/components/pageCommonFunction.js'
  export default {
    components:{
      cascaderDom
    },
    computed:{
        ...mapState('trhg', {
            areaMap: state => state.area.areaMap?state.area.areaMap:[],
            areaTreeMap: state => state.area.areaTreeMap?state.area.areaTreeMap:{},
        }),
    },
    data(){
      return{
        ...this.createCommonDataField(),
        columns1: [
          { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
          // { key:'perfAssessNum',title: '绩效考核责任书编号',  align: 'center', width: 100},
          { key:'companyName',title: '企业名称',  align: 'center', width: 200},
          { key:'companyAddress',title: '所在地',  align: 'center', width: 120, render: this.renderCellArea },
          { key:'licenceInfo',title: '企业资质证书类别及等级',  align: 'center', width: 120 },
          { key:'certificateNum',title: '证书编号',  align: 'center', width: 150 },
          { key:'certValidDate',title: '有效期',  align: 'center', width: 100, render: this.renderCellDate },
          { key:'licenceNum',title: '许可证编号',  align: 'center' , width: 150},
          { key:'licenceRange',title: '许可范围',  align: 'center', width: 150 },
          { key:'authOrgName',title: '许可机关',  align: 'center', width: 180 },
          { key:'licenceValidDate',title: '有效期',  align: 'center', width: 100, render: this.renderCellDate },
          { key:'saInsurance',title: '安全生产责任险情况',  align: 'center', width: 120, tooltip:true },
            { key:'createDate',title: '填表时间',  align: 'left', width: 120,  render: this.renderCellDate },
            { key:'notes',title: '备注',  align: 'center', width: 120, tooltip:true },
          this.getActionColumns(),
        ],
        ruleCustom : {
          // perfAssessNum: [ { required: true, message: '请填写绩效考核责任书编号', trigger: 'change' } ],
            companyId: [ { required: true, message: '请填写企业名称', trigger: 'change' } ],
          companyAddress: [ { required: true, message: '请填写所在地', trigger: 'change' } ],
          licenceInfo: [ { required: true, message: '请填写企业资质证书类别及等级', trigger: 'change' } ],
          // certificateNum: [ { required: true, message: '请填写证书编号', trigger: 'change' } ],
          // certValidDate: [ { type:'date', required: true, message: '请填写有效期', trigger: 'change' } ],
          // licenceNum: [ { required: true, message: '请填写许可证编号', trigger: 'change' } ],
          // licenceRange: [ { required: true, message: '请填写许可范围', trigger: 'change' } ],
          // authOrgName: [ { required: true, message: '请填写许可机关', trigger: 'change' } ],
          // licenceValidDate: [ { type:'date', required: true, message: '请填写有效期', trigger: 'change' } ],
          // saInsurance: [ { required: true, message: '请填写安全生产责任险情况', trigger: 'change' } ],
          // notes: [ { required: true, message: '请填写备注', trigger: 'change' } ],
          // rptPeroid: [ { required: true, message: '请填写月份', trigger: 'change', type:'date' } ],
        },
        tableHeight:10,
        // api
        queryUrl:Api.querySafeRptProductLicence,
        exportUrl:Api.exportSafeRptProductLicence,
        deleteUrl:Api.deleteSafeRptProductLicence,
        bthDeleteUrl:Api.batchDeleteSafeRptProductLicence,
        getUrl:Api.getSafeRptProductLicence,
        updateUrl:Api.updateSafeRptProductLicence,
        saveUrl:Api.saveSafeRptProductLicence,
      }
    },
    async mounted() {
      this.setTableHeight();
	  this.pageStatus.baseLoading = true
      await this.$store.dispatch('trhg/area/query', {scope:this}, { root: true })
	  this.pageStatus.baseLoading = false
      this.query();
        this.tempAreaTree = this.areaTreeMap['0']
    },
    methods:{
        ...pageCommonFunction,

        createEmptyDataToAdd() {
            return {
                companyAddressArr:[]
            }
        },
        beforeEditDialogOpen(data) {
            if(data.row.companyAddress){
                data.row.companyAddressArr = data.row.companyAddress.split(',')
                data.row.companyAddressName = this.areaCodeToAreaName(data.row.companyAddress)
            }
        },
        async afterDataToViewInit(data) {
            if (data && data.companyAddress) {
                let companyAddressArr = data.companyAddress.split(',')
                this.tempAreaTree = []
                setTimeout(() => {
                    this.tempAreaTree = this.addressEditArr(this.areaTreeMap,companyAddressArr)
                }, 100)
            }
        },
        deleteData(params) {
            this.deleteDateAjax(params);
        },
        query() {
            this.queryAjax();
        },
        submit(name) {
            this.$set(this.dataToView,'companyAddress',this.dataToView.companyAddressArr.join(','))
            this.submitAjax(name);
        },

    },
    watch:{
    },

  }
</script>

<style lang='css' scoped>
    .rpt-form{}
    /deep/ .rpt-form .query-form-el{width:100%;}

</style>
